<template>
  <div class="list">

    <Head :title="title1"></Head>
    <img class="newbanner" :src="newBanner" alt="" />
    <div class="banner">
      <div @click="bgc = 0" :class="{ active: bgc == 0 }">综合</div>
      <div class="price" @click="tabber">
        <div @click="bgc = 1" :class="{ active: bgc == 1 }">价格</div>
        <div class="icon">
          <van-icon name="arrow-up" :color="current == 'up' ? '#cea62a' : ''" />
          <van-icon name="arrow-down" :color="current == 'down' ? '#cea62a' : ''" />
        </div>
      </div>
      <div @click="bgc = 2" :class="{ active: bgc == 2 }">分类</div>
    </div>
    <ul class="goodslist">
      <li v-for="item in list" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <p class="goodstitle">{{ item.name }}</p>
        <p class="goodsprice">￥{{ item.retail_price }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import Head from '@/components/title.vue'
import { goodsList } from '@/api/home'
const route = useRoute()
const name = ref('')
const title1 = ref('')
const newBanner = ref('')
const list = ref()
const isNew = ref('')
const isHot = ref('')
// 商品的升序和降序
const current = ref('default')
const bgc = ref(0)

onMounted(() => {
  name.value = route.query.name
  if (name.value === 'news') {
    newBanner.value = 'http://jinglins.gitee.io/bufan-tesco-mall/assets/new-list-banner-b691c95d.png'
    title1.value = '新品首发'
    isNew.value = 1
  } else {
    newBanner.value = 'http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-list-banner-ccf22d3f.png'
    title1.value = '人气推荐'
    isHot.value = 1
  }
  goodList()
})
const tabber = () => {
  if (current.value === 'default') {
    current.value = 'up'
  } else if (current.value === 'up') {
    current.value = 'down'
  } else {
    current.value = 'up'
  }
  if (bgc.value !== 1) {
    current.value = 'default'
  }
  goodsList({
    isNew: isNew.value,
    isHot: isHot.value,
    order: current.value === 'up' ? 'desc' : 'asc'
  }).then((res) => {
    console.log(res)
    list.value = res.data
  })
}

const goodList = async () => {
  const res = await goodsList({
    isNew: isNew.value,
    isHot: isHot.value,
    order: current.value
  })
  list.value = res.data
}

</script>

<script>
export default {
  name: 'newsView'
}
</script>

<style lang="scss" scoped>
.list {
  background-color: #f7f7f7;

  .active {
    color: #cea62a;
  }

  .newtitle {
    text-align: center;
    background-color: #fff;
    height: 100px;
    line-height: 100px;
  }

  .banner {
    display: flex;
    justify-content: space-around;
    font-size: 28px;
    color: #212121;
    font-weight: 400;
    height: 100px;
    line-height: 100px;
    background-color: #fff;

    .price {
      position: relative;

      .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        right: -35px;
        top: 23px;
      }
    }
  }

  .newbanner {
    width: 750px;
    // height: 326px;
  }

  .goodslist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0px 20px;

    img {
      width: 350px;
      height: 350px;
      background-color: #fff;
      margin-top: 19px;
    }

    .goodstitle {
      font-size: 26px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      margin: 17px 0px 0px 22px;
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .goodsprice {
      font-size: 26px;
      color: #9e4242;
      letter-spacing: 0;
      font-weight: 400;
      margin: 5px 0px 44px 22px;
    }
  }
}</style>
